<template>
  <div class="search-page">
    <div class="back-ground">
      <div class="content">
        <div class="table-content">
          <div class="content-title">
            {{typeByIndex}}
          </div>
          <div class="select-content">
            <picker   :value="dataClazz"
                      @change="pickerChange"
                      :range="numListClazz"
            >
              <div class="select-content-type">
                <view class="picker">
                  {{dataClazz}}
                </view>
                <img src="@/static/icon/Icons_Tint Color_Black@3x.png" class="select-icon" />
              </div>
            </picker>
          </div>
        </div>
        <div class="table-content" style="margin-top: 50rpx">
          <div class="content-title">
            标准总数{{num}}个
          </div>
          <div>
            <view class="charts-box">
              <qiun-data-charts
                  type="pie"
                  :chartData="chartData"
                  background="none"
              />
            </view>
          </div>
        </div>
      </div>
    </div>
    <div class="button-around">
      <div
          class="select-button"
          @click="handleDetailedClick"
      >
        明细
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "numDetailPage",
  data (){
    return {
      sumSelectList:{},
      num: 0,
      typeByIndex:'',
      chartData:{},
      dataClazz: '请选择',
      numListClazz: []
    }

  },
  onLoad(option){
    this.optionIndex = option.index
    this.sumSelectList = JSON.parse(option.list)
    this.dataClazz = option.search
    this.typeByIndex = {
      4: '大类',
      5: '组',
      6: '型'
    }[option.index]
  },
  mounted(){
    this.handleGetClazzByNum()
  },
  methods: {
    handleDetailedClick() {
      wx.navigateTo({
        url: "/pages/detailedPage?list=" + JSON.stringify(this.sumSelectList)
      });
    },
    pickerChange(e){
      this.dataClazz = this.numListClazz[e.detail.value]
      if(this.optionIndex === '4'){
        this.sumSelectList.clazz = this.dataClazz
        this.$api.userPortalGetClazzByNum(this.sumSelectList).then((res) => {
          this.num = res.data.num
          const data = res.data.data.map((item) => {
            return {name: item.x,value: item.y}
          })
          const series = {
            data
          }
          this.chartData = {
            series: [series]
          }
        })
      }
      if(this.optionIndex === '5'){
        this.sumSelectList.groups = this.dataClazz
        this.$api.userPortalGetGroupsNumByNum(this.sumSelectList).then((res) => {
          this.num = res.data.num
          const data = res.data.data.map((item) => {
            return {name: item.x,value: item.y}
          })
          const series = {
            data
          }
          this.chartData = {
            series: [series]
          }
        })
      }
      if(this.optionIndex === '6'){
        this.sumSelectList.type = this.dataClazz
        this.$api.userPortalGetTypeNumByNum(this.sumSelectList).then((res) => {
          this.num = res.data.num
          const data = res.data.data.map((item) => {
            return {name: item.x,value: item.y}
          })
          const series = {
            data
          }
          this.chartData = {
            series: [series]
          }
        })
      }
    },
    handleGetClazzByNum(){
      if(this.optionIndex === '4'){
        this.sumSelectList.clazz = this.dataClazz
        this.$api.userPortalConfigByColumn(this.sumSelectList.clazz).then((res) => {
          this.numListClazz = res.data.clazz.map((item) => {
            return item.clazz
          })
          this.$api.userPortalGetClazzByNum(this.sumSelectList).then((res) => {
            this.num = res.data.num
            const data = res.data.data.map((item) => {
              return {name: item.x,value: item.y}
            })
            const series = {
              data
            }
            this.chartData = {
              series: [series]
            }
          })
        })
      }
      if(this.optionIndex === '5'){
        this.sumSelectList.groups = this.dataClazz
        this.$api.userPortalGetGroupNum( this.sumSelectList).then((res) => {
          this.numListClazz = res.data.data.map((item) => {
            return item.x
          })
          this.$api.userPortalGetGroupsNumByNum(this.sumSelectList).then((res) => {
            this.num = res.data.num
            const data = res.data.data.map((item) => {
              return {name: item.x,value: item.y}
            })
            const series = {
              data
            }
            this.chartData = {
              series: [series]
            }
          })
        })
      }
      if(this.optionIndex === '6'){
        this.sumSelectList.type = this.dataClazz
        this.$api.userPortalConfigByColumn(this.sumSelectList).then((res) => {
          this.numListClazz = res.data.type.map((item) => {
            return item.type
          })
          this.$api.userPortalGetTypeNumByNum(this.sumSelectList).then((res) => {
            this.num = res.data.num
            const data = res.data.data.map((item) => {
              return {name: item.x,value: item.y}
            })
            const series = {
              data
            }
            this.chartData = {
              series: [series]
            }
          })
        })
      }
    }
  },
};
</script>

<style scoped lang="scss">
/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
.charts-box{
  width: 100%;
  height:300px;
}
.select-content {
  padding: 24rpx;
  .select-content-type {
    margin: auto;
    width: 650rpx;
    background-color: #F7F8FA;
    border: rgba(89,172,53,1) 2rpx solid;
    display: flex;
    align-items: center;
    border-radius: 8rpx;
    justify-content: space-between;
    padding: 24rpx;
    .select-icon {
      width: 12rpx;
      height: 22rpx;
    }
  }
}

.search-page {
  min-height: 100%;
    .select-button {
      color: #FFFFFF;
      width: 100%;
      height: 75rpx;
      border-radius: 16rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #59AC35;
    }
  .back-ground {
    background-image: linear-gradient(#6ACC40,#59AC35) ;
    height: 160rpx;
    width: 100%;
    .content {
      position: absolute;
      z-index: 999;
      width: 100%;
      flex-direction: column;
      min-height: 100%;
      background-color: transparent;
      display: flex;
      padding: 24rpx 24rpx 80rpx 24rpx;
      .table-content {
        border-radius: 16rpx;
        width: 100%;
        display: flex;
        flex-direction: column;
        min-height: 100%;
        background-color: #FFFFFF;
        .content-title {
          padding: 24rpx;
          border-radius: 16rpx 16rpx 0 0;
          border-bottom: 2rpx #EEEEEE solid;
          height: 100rpx;
          background-color: #FFFFFF;
          font-size: 40rpx;
          font-weight: 700;
          color: #59AC35;
          display: flex;
          align-items: start;
          width: 100%;
        }
        .table-list {
          min-height: 100%;
          width: 100%;
          align-items: center;
          padding: 24rpx;
          display: flex;
          flex-direction: column;
          background-color: #FFFFFF;
        }
      }
    }
  }
}

</style>
